<!--
 * @Author: sunli
 * @Date: 2024-02-23 09:06:05
 * @LastEditors: sunli
 * @LastEditTime: 2024-02-23 10:18:02
 * @FilePath: /debug/src/views/operation/echarts.vue
 * @Description: 
-->
<template>
  <div>
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>应用分析</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="type-err">
      <div class="month">
        <el-date-picker
          v-model="typeErrPicker"
          type="month"
          placeholder="选择日期"
        />
      </div>
      <div id="typeErr"></div>
    </div>
    <div class="time-err">
      <div class="month">
        <el-date-picker
          v-model="timeErrPicker"
          type="year"
          placeholder="选择日期"
        />
      </div>
      <div id="timeErr"></div>
    </div>
  </div>
</template>

<script setup>
/** 第三方依赖 */
import { ref, reactive, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import * as echarts from 'echarts';

/** 网络接口 */

/** store */

/** 工具函数类 */

/** 组件类 */

const route = useRoute()
const router = useRouter()

const typeErrPicker = ref(new Date())
const timeErrPicker = ref(new Date())
watch(typeErrPicker, () => {
  typeErrChart.setOption({
    series: {
      data: [
        { value: 1, name: 'jsError' },
        { value: 1, name: 'resourceError' },
        { value: 1, name: 'promiseError' }
      ]
    }
  });
})
watch(timeErrPicker, () => {
  timeErrChart.setOption({
    series: [
    {
      data: [1, 2, 4, 5, 6, 230, 210,1, 2, 4, 5, 6]
    },
    {
      data: [220, 182, 191, 234, 26, 330, 310,1, 2, 4, 5, 6]
    },
    {
      data: [150, 232, 201, 154, 16, 330, 410,1, 132, 4, 5, 6]
    }
  ]
  });
})

let typeErroption, typeErrChart
let timeErroption, timeErrChart
onMounted(() => {
const typeErrchartDom = document.getElementById('typeErr');
typeErrChart = echarts.init(typeErrchartDom);
typeErroption = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  title: {
    text: '异常分析-月度',
    left: 'center'
  },
  series: [
    {
      name: '来自',
      type: 'pie',
      radius: ['40%', '70%'],
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 30,
          fontWeight: 'bold'
        }
      },
      data: [
        { value: 1048, name: 'jsError' },
        { value: 735, name: 'resourceError' },
        { value: 580, name: 'promiseError' }
      ]
    }
  ]
};
typeErroption && typeErrChart.setOption(typeErroption);


const timeErrchartDom = document.getElementById('timeErr');
timeErrChart = echarts.init(timeErrchartDom);
timeErroption = {
  title: {
    text: '异常分析-年度',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    top: '5%',
    left: 'center',
    data: ['jsError', 'resourceError', 'promiseError']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'jsError',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90]
    },
    {
      name: 'resourceError',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310,120, 132, 101, 134, 90]
    },
    {
      name: 'promiseError',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410,120, 132, 101, 134, 90]
    }
  ]
};
timeErroption && timeErrChart.setOption(timeErroption);
})


</script>

<style lang='scss' scoped>
.type-err, .time-err {
  position: relative;
  .month {
    z-index: 9999;
    position: absolute;
    right: 50px;
    top: 0px;
  }
}
#typeErr {
  padding: 0 40px;
  width: 80%;
  height: 500px;
}
#timeErr {
  margin: 40px 0;
  padding: 0 40px;
  width: 80%;
  height: 500px;
}
.nav {
  padding: 20px 10px;
}
</style>